<template>
  <div>
    <div class="live_box">
      <div class="live_user_box">
        <span class="iconfont icon-zhibozhong"
          ><span class="zhibo">直播中</span></span
        >
        <div class="live_user_img">
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F0512210S939%2F2105120S939-9-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643189822&t=efff15c0e97a76610e2678fb5d7e2244"
          />
        </div>
        <div class="live_user_title">
          <p class="live_title">中国第一达人秀</p>
          <div class="user_box">
            <div class="img">
              <img
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F0512210S939%2F2105120S939-9-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643189822&t=efff15c0e97a76610e2678fb5d7e2244"
              />
            </div>
            <div class="user_name">
              <p class="name">张三</p>
              <p>102人在看</p>
            </div>
          </div>
        </div>
      </div>
      <div class="live_user_box">
        <span class="iconfont icon-zhibozhong"
          ><span class="zhibo">直播中</span></span
        >
        <div class="live_user_img">
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F0G621100647%2F210G6100647-8-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643195346&t=eae3e6ba65828e0010ba2f01ab1b20a7"
          />
        </div>
        <div class="live_user_title">
          <p class="live_title">中国第一达人秀</p>
          <div class="user_box">
            <div class="img">
              <img
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F0512210S939%2F2105120S939-9-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643189822&t=efff15c0e97a76610e2678fb5d7e2244"
              />
            </div>
            <div class="user_name">
              <p class="name">张三</p>
              <p>102人在看</p>
            </div>
          </div>
        </div>
      </div>
      <div class="live_user_box">
        <span class="iconfont icon-zhibozhong"
          ><span class="zhibo">直播中</span></span
        >
        <div class="live_user_img">
          <img
            src="https://img1.baidu.com/it/u=1875739781,4152007440&fm=253&fmt=auto&app=120&f=JPEG?w=1024&h=576"
          />
        </div>
        <div class="live_user_title">
          <p class="live_title">中国第一达人秀</p>
          <div class="user_box">
            <div class="img">
              <img
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F0512210S939%2F2105120S939-9-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643189822&t=efff15c0e97a76610e2678fb5d7e2244"
              />
            </div>
            <div class="user_name">
              <p class="name">张三</p>
              <p>102人在看</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less">
.live_box {
  padding: 0px 5px;
  column-count: 2;
  column-gap: 10px;
  margin-top: 5px;
  
  .live_user_box {
    position: relative;
    height: 100%;
    background-color: #fff;
    margin-bottom: 5px;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    counter-increment: item-counter;
    .iconfont {
      position: absolute;
      top: 10px;
      right: 5px;
      font-size: 12px;
      transform: scale(0.8);
      color: #1be7d3;
      background-color: #191e20;
      padding: 0 5px;
      .zhibo {
        padding-left: 5px;
        color: #fff;
      }
    }
    .live_user_img {
      display: flex;
      justify-content: center;
      align-content: center;
      overflow: hidden;
      width: 100%;
      img {
        height: 200px;
      }
    }
    .live_user_title {
      padding: 5px;
      font-size: 12px;
      .live_title {
        width: 90%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .user_box {
        display: flex;
        align-items: center;
        .img {
          width: 20px;
          height: 20px;
          img {
            width: 20px;
            height: 20px;
            border-radius: 50%;
          }
        }
        .user_name {
          width: 90%;
          padding: 0 5px;
          font-size: 12px;
          transform: scale(0.8) scaleX(-20px);
          color: #a0a1a3;
          display: flex;
          justify-content: space-between;
          .name {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
}
</style>